<template>
  <div>
    <!--顶部那个搜索框 -->
    <div class="searchDiv">
      <div class="qrCode">
        <van-icon name="scan" size="26px" />
      </div>
      <router-link to="/home/search" class="serLink">
        <router-link to="/home/search">搜索</router-link>
      </router-link>
      <div class="tubiao">
        <van-icon name="gold-coin" size="29px" />
        <a
          href="tencent://message/?uin=1272951782&Menu=yes&Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"
        >
          <van-icon name="service" />
        </a>
      </div>
    </div>
    <!-- 首页内容 -->
    <div class="homeDiv">
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 十宫格 -->
      <van-grid :column-num="5">
        <router-link to="/HotHands">
          <van-grid-item icon="new-arrival-o" text="天猫新品" />
        </router-link>
        <router-link to="/SecondHands">
          <van-grid-item icon="logistics" text="天猫超市" />
        </router-link>
        <router-link to="/CashList">
          <van-grid-item icon="balance-o" text="领淘金币" />
        </router-link>
        <router-link to="/RecommendList">
          <van-grid-item icon="service" text="推荐商品" />
        </router-link>
        <router-link to="/MyFish">
          <van-grid-item icon="gift" text="我的咸鱼" />
        </router-link>
        <a
          href="tencent://message/?uin=1272951782&Menu=yes&Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"
        >
          <van-grid-item icon="chat-o" text="与我联系" />
        </a>

        <router-link to="/TodayHot">
          <van-grid-item icon="hot-sale-o" text="今日爆款" />
        </router-link>
        <router-link to="/classify">
          <van-grid-item icon="vip-card-o" text="会员推荐" />
        </router-link>
        <router-link to="/ContactPeople">
          <van-grid-item icon="friends-o" text="我的好友" />
        </router-link>
        <router-link to="/personal/">
          <van-grid-item icon="gem" text="我的淘宝" />
        </router-link>
      </van-grid>

      <!-- 热门商品，二手商品，推荐商品 -->
      <!-- <router-link to="/HotHands">热门商品</router-link>
      <router-link to="/SeconeHands">二手商品</router-link>-->
      <!-- 滚动的橙色通知 -->
      <van-notice-bar text="淘宝头条:都城南庄新款上架，全店五折，买到手软" left-icon="volume-o" />

      <!-- 瀑布流 -->
      <div class="waterfalls-flow">
        <ul ref="left" class="waterfalls-flow-left">
          <!-- 加载左侧列表 -->
          <router-link tag="li" :to="'/details/'" v-for="(item,index) in leftList" :key="index">
            <img :src="item.coverImgUrl" alt />
            <div>
              {{item.name}}
              <br />
              ￥{{item.price}}.00
            </div>
          </router-link>
        </ul>
        <ul ref="right" class="waterfalls-flow-right">
          <!-- 加载you右侧列表 -->
          <router-link tag="li" :to="'/details/'" v-for="(item,index) in rightList" :key="index">
            <img :src="item.coverImgUrl" alt />
            <div>
              {{item.name}}
              <br />
              ￥{{item.price}}.00
            </div>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { shopList } from "../api/shop-api/shop-api";

export default {
  // name: "WaterfallsFlow",
  data() {
    return {
      images: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590144755015&di=030cc1f206e5591d6ddaabd33c7ce71c&imgtype=0&src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2016-7%2F201607140836118692320.png",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590145027178&di=d33f6cd511de4f6c541219a7c42a8950&imgtype=0&src=http%3A%2F%2Ffiles.haote.net%2Fimages%2F2019_09%2F19%2F12917148_005_thumb.png",
        "http://img5.imgtn.bdimg.com/it/u=3498388428,3951192993&fm=26&gp=0.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590144927209&di=f93a61a266930d26f13a8d1d702d24f8&imgtype=0&src=http%3A%2F%2Fimg.zhisheji.com%2F20181124073932VayEO.jpg%3FimageMogr2%2Fthumbnail%2F600x%2Fcrop%2F%2521600x375a0a66"
      ],
      list: [],
      leftList: [],
      rightList: []
    };
  },
  created() {
    //数据初始化
    shopList(1, 20).then(res => {
      // console.log(res);
      if (res.code === 0) {
        //请求成功
        this.list = res.rows;
        this.setList();
      } else {
        //请求失败，提示（可以在拦截器做统一的失败提示
      }
    });
  },
  methods: {
    //递归调用
    setList() {
      //判断分给左边和右边的条件
      //如果右边比左边低，放在右边，反之左边
      //涉及到获取左边和右边的高度//offsetHeight（算边框）,clientHeight（不算边框）,scrollHeight(滚动的那个东西的高度)
      // scropTop设置滚动条
      //  debugger
      // console.log(this.$refs.left.offsetHeight)

      if (this.list.length === 0) {
        //原始数据处理完了，代表递归调用结束了
        return;
      }
      //这时数据已经更新了，但是对应的界面没有渲染，因为vue的渲染是异步的，数据更新后，界面不会立即渲染
      //没办法获取到屏幕的高度，所以需要这样this.$nextTick(()
      let isleft;
      if (this.$refs.left.offsetHeight <= this.$refs.right.offsetHeight) {
        //当左边高度小于右边时，把元素放到左边，//pop()是取出的那个元素，用push放到左边
        isleft = true; //如果为true,代表新增的是左边，false代表新增的是右边
        // this.leftList.push(this.list.pop());pop是从列表最后一位取值，我们要从第一位取值
        this.leftList.push(this.list.shift());
        // shift(从第一个取值)，unshift（从第一个设置值）,pop（从最后一个取值） ,push（从最后一个添加值）
      } else {
        isleft = false;
        this.rightList.push(this.list.shift());
      }
      //递归调用
      // this.setList();
      this.$nextTick(() => {
        //这样就完成了界面的更新，可以获取高度了就
        // 等到图片加载后才能计算出来真实的高度，所以需要监听图片加载的事件
        //图片什么时候加载完，onload事件  加载完成的事件
        //需要获取到图片的dom对象，需要判断获取左边的还是右边的

        //如果imgDomObj=isleft，就执行this.$refs.left.children[this.leftList.length - 1].firstElementChild
        //反之，执行this.$refs.right.children[this.rightList.length - 1].firstElementChild
        let imgDomObj = isleft
          ? this.$refs.left.children[this.leftList.length - 1].firstElementChild
          : this.$refs.right.children[this.rightList.length - 1]
              .firstElementChild;
        // debugger
        imgDomObj.onload = imgDomObj.onerror = () => {
          this.setList();
        };
      });
    }
  }
};
</script>

<style scoped lang="less">
/* 顶部搜索框连接 */
.searchDiv {
  height: 45px;
  background-color: #f5f2f1;
}
.van-icon-scan {
  margin-left: 5px;
  margin-top: 7px;
}
.van-icon-gold-coin {
  color: #fd4b1a;
}
.van-icon-service {
  color: rgb(196, 75, 44);
  font-size: 26px;
}
.qrCode,
.serLink,
.tubiao {
  float: left;
}
.qrCode {
  width: 12%;
}
.serLink {
  height: 65%;
  width: 60%;
  border: 1.5px solid #fd4b1a;
  border-radius: 30px;
  margin-top: 5px;
  line-height: 30px;
  padding-left: 5px;
}
.tubiao {
  width: 20%;
  /* height: 35px; */
  margin-top: 7px;
  padding-left: 10px;
  /* background-color: darkmagenta; */
}

img {
  width: 100%;
  height: 100%;
}
.van-swipe {
  // border: 1px solid rgb(245, 103, 60);
  width: 94%;
  height: 140px;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
}
/* 十个商品展示 */
.van-grid-item {
  color: #fd4b1a;
}
// 瀑布流
.waterfalls-flow {
  > ul {
    float: left;
    width: 50%;
    padding: 5px;
    box-sizing: border-box;
    // border: 10px solid purple;
    img {
      width: 100%;
      height: auto;
    }
    li {
      padding: 10px 0;
      text-align: center;
    }
  }
  //less里，&相当于父级元素
  // .Waterfalls-flow-left  =  &-left
  &-left {
  }
  &-right {
  }
}
</style>